<template>
	<view class="home">
		<view class="content">
			<view class="item" v-for="item in listArr" :key="item._id" @click="goDetail(item._id)">
				<view class="text">
					<view class="title">{{item.title}}</view>
					<view class="info">
						<text>{{item.author}}</text>
						<uni-dateformat :date="item.posttime" format="MM-dd" :threshold="[60000, 3600000]"></uni-dateformat>
					</view>
				</view>
				<view class="pic">
					<image src="../../static/logo.png" mode="heightFix"></image>
				</view>
			</view>
		</view>
		<view class="goAdd" @click="goAdd">
			<uni-icons type="plusempty" size="30" color="#ffffff"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr: []
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.getData()
		},
		onPullDownRefresh() {
			this.listArr = []
			this.getData()
		},
		methods: {
			getData() {
				uniCloud.callFunction({
					name: 'art_get_all',
					data: {
						skip: this.listArr.length
					}
				}).then(res => {
					let oldList = this.listArr
					let nsList = [...oldList, ...res.result.data]
					this.listArr = nsList
					uni.stopPullDownRefresh()
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			},
			goAdd() {
				uni.navigateTo({
					url: "/pages/add/add"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.content {
			padding: 30upx;
			.item {
				display: flex;
				justify-content: space-between;
				padding: 20upx 0;
				border-bottom: 1upx solid #eee;
				.text {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-right: 20upx;
					.title {
						font-size: 44upx;
						color: #333;
						text-align: justify;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.info {
						font-size: 28upx;
						color: #888;
						text {
							padding-right: 20upx;
						}
					}
				}
				.pic {
					width: 260upx;
					height: 180upx;
					text-align: center;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.goAdd {
			width: 120upx;
			height: 120upx;
			background-color: #289939;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			font-size: 50upx;
			position: fixed;
			right: 60upx;
			bottom: 100upx;
			box-shadow: 0 0 20upx rgba(43, 153, 57, 0.7);
		}
	}
</style>
